<template>
	<div class="popup-rules">
		<button class="popup-rules__btn" @click="open" v-if="showButton">规则</button>

		<cl-popup direction="bottom" :force-update="false" :visible.sync="visible">
			<div scroll-y class="popup-rules__container">
				<div class="popup-rules__rich-text" v-html="content"></div>
			</div>
		</cl-popup>
	</div>
</template>

<script>
import ClPopup from '@/components/popup';

export default {
	components: {
		ClPopup
	},

	props: {
		showButton: Boolean
	},

	data() {
		return {
			content: '',
			visible: false
		};
	},

	methods: {
		open() {
			this.$service.bwbt.shareTemplate
				.template({
					type: 14
				})
				.then(res => {
					this.content = res;
					this.visible = true;
				});
		},

		close() {
			this.visible = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.popup-rules {
	/deep/.cl-popup {
		border-radius: 20px 20px 0 0;

		&__container {
			padding: 20px 0;
			overflow: hidden auto;
		}
	}

	&__btn {
		position: fixed;
		right: 0;
		top: 30px;
		background-color: rgba(0, 0, 0, 0.3);
		color: #fff;
		padding: 6px 20px;
		margin: 0;
		border-radius: 30px 0 0 30px;
		z-index: 99;
		font-size: 24px;
		height: auto;
		line-height: normal;
		border: 0;

		&::after {
			border: 0;
		}
	}

	&__title {
		font-size: 30px;
		text-align: center;
		flex: 1;
	}

	&__close {
		position: absolute;
		right: 20px;
		top: 28px;
		font-size: 40px;
		z-index: 9;
	}

	&__container {
		padding: 5px 10px;
		max-height: 800px;
		width: 100%;
		font-size: 24px;

		/deep/h2 {
			display: block;
			text-align: center;
			font-size: 30px;
		}

		/deep/.rule {
			margin-top: 20px;
			line-height: 50px;
			font-size: 26px;
			padding: 0 20px;
			letter-spacing: 1px;
		}
	}

	&__rich {
		&-mp {
			padding: 0 20px;
		}
	}
}
</style>
